<template>
	<view class="changePassword" :class="APPTheme">
		<view class="status_bar"></view>
		<uni-nav-bar fixed @clickLeft="navigateBack" left-icon="back" title="修改密码" :color="APPTheme=='theme-light'?'#000000':'#ffffff'"
		 :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'"></uni-nav-bar>
		<view class="wrap" :class='APPTheme'>
			<view class="top"></view>
			<view class="content">
				<view class="title">请设置密码</view>
				<view class="input-title">原密码：</view>
				<view class="lz-column">
					<input class="u-border-bottom" :password="show.showPassword3" v-model="login.oldPassword" placeholder="请输入原密码" />
					<uni-icons type="eye-filled" size="22" @click="show.showPassword3=!show.showPassword3" :color="show.showPassword3?'#888':'#00aa7f'"></uni-icons>
				</view>
				<view class="input-title">新密码：</view>
				<view class="lz-column">
					<input class="u-border-bottom" :password="show.showPassword2" v-model="login.newPassword" placeholder="请输入新密码" />
					<uni-icons type="eye-filled" size="22" @click="show.showPassword2=!show.showPassword2" :color="show.showPassword2?'#888':'#00aa7f'"></uni-icons>
				</view>
				<view class="input-title">确认密码：</view>
				<view class="lz-column">
					<input class="u-border-bottom" :password="show.showPassword1" v-model="login.aginPassword" placeholder="请输入确认密码" />
					<uni-icons type="eye-filled" size="22" @click="show.showPassword1=!show.showPassword1" :color="show.showPassword1?'#888':'#00aa7f'"></uni-icons>
				</view>
				<wButton text="确 定" :rotate="login.isRotate"  bgColor="linear-gradient(to right, rgba(10,177,87,0.7), rgba(50,135,200,0.6))" @click.native="submit()" class="getCaptcha"></wButton>
				<view class="alternative">
					<view class="issue">忘记密码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import wButton from '@/components/watch-login/watch-button.vue' //button
	export default {
		components:{
			wButton
		},
		data() {
			return {
				login:{
					oldPassword:'',
					newPassword:'',
					aginPassword:'',
					isRotate: false, //是否加载旋转
				},
				show:{
					showPassword1:true,
					showPassword2:true,
					showPassword3:true
				},
				ulist: [{
						title: '修改密码',
						extraIcon: {
							color: '#4cd964',
							size: '24',
							type: 'contact'
						}
					},
					{
						title: '新消息通知',
						extraIcon: {
							color: '#ff9f00',
							size: '22',
							type: 'home-filled'
						}
					},
					{
						title: '关于助手',
						extraIcon: {
							color: '#0088fe',
							size: '22',
							type: 'shop'
						}
					}
				]
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		onLoad() {
			that = this
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			navgetTo(item) {
				if (item.title == '修改密码') {
					uni.navigateTo({
						url: '../../template/changePassword/changePassword',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			submit(){
				if(that.login.newPassword||that.login.oldPassword||that.login.aginPassword) {
					if(that.login.newPassword!=that.login.aginPassword){
						uni.showToast({
							title: '两次密码不一致',
							icon:'none'
						});
						return
					}
					that.login.isRotate=true
					let req={
						password:that.login.oldPassword,//原始密码
						newPassword:that.login.newPassword//新密码
					}
					that.GLOBAL.doPost(that.api.GLOBAL_rest_sys_user_resetNewpassword,req).then(res=>{
						that.login.isRotate=false
						if(res.code=='0'){
							uni.showToast({
								title: res.data.msg,
								success() {
									uni.reLaunch({
										url: '../login/passwordLogin',
										success: res => {},
										fail: () => {},
										complete: () => {}
									});
								}
							});
							
						}
					})
				}else{
					uni.showToast({
						title: '请填写完整',
						icon:"none"
					});
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.changePassword{height: 100%;}
	@import '../../template/login/login.scss';
</style>
